/**
 * Created by tdzl2003 on 8/24/16.
 */
import React from 'react';
import { Button, Table, Input } from 'antd';
import {get} from '../../logics/rpc';
import ObjectTable from '../../components/ObjectTable';
import {Link} from 'react-router';

const SEX_NAME = {
  'male': '男',
  'female': '女',
};

const columns = [{
  title: 'ID',
  dataIndex: 'id',
  width: 60,
},  {
  title: '头像',
  render: (text, record, index) => (
    record.avatarUrl40 && <a href={record.avatarUrl} target="blank"><img src={record.avatarUrl40} /></a>
  ),
}, {
  title: '手机号',
  dataIndex: 'mobile',
  width: 120,
}, {
  title: '昵称',
  dataIndex: 'name',
}, {
  title: '性别',
  render: (text, record, index) => {
    const sex = record.sex;
    if (sex) {
      return SEX_NAME[sex];
    }
    return '未知';
  },
}, {
  title: '用户登陆次数',
  render: () => '-',
},  {
  title: '用户级别',
  render: () => '-',
},  {
  title: '用户收入排名',
  render: () => '-',
},  {
  title: '领取二维码次数',
  render: () => '-',
},  {
  title: '创作文章次数',
  render: () => '-',
}, {
  title: '投放流量次数',
  render: () => '-',
}, {
  title: '投放流量总数量',
  render: () => '-',
}, {
  title: '奖励流量总数量',
  render: () => '-',
}, {
  title:'用户总收入',
  width: 60,
  render: (record)=> {
    return <div>
      <Link to={`/user/${record.id}/earned`}>{`${record.earned}`}</Link>
    </div>
  }
}, {
  title: '用户已提金额',
  render: (record) => {
    return <div>
      <Link to = {`/user/${record.id}/withdraw`}>{`${[record.earned]-[record.salary]}`}</Link>
      </div>
  }
},{
  title:'用户余额',
  render:(record) =>{
    return <div>
      <Link to = {`/user/${record.id}/salary`}>{`${record.salary}`}</Link>
      </div>
  }
}];

const BANK_ACCOUNT_TYPES = {
  'wx': '微信',
  'alipay': '支付宝',
  'bank': '银行卡',
};

const bankAccountColumn = [
  {
    title: '类型',
    render: (record) => BANK_ACCOUNT_TYPES[record.type],
  },
  {
    title: '账号',
    dataIndex: 'account',
  },
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '昵称',
    dataIndex: 'nick',
  },
];

export default class List extends React.Component{
  state = {};
  timer = null;
  fetchData = (params) => get('/admin/user/list', {
    ...params,
    search: this.state.search,
  });
  onSearchChange=(ev) => {
    const search = ev.target.value;
    if (this.timer){
      clearTimeout(this.timer);
    }
    this.timer = setTimeout(()=>{
      this.timer = null;
      this.setState({
        search,
      }, ()=>{
        this.refs.table.refresh();
      })
    }, 1000);
  };
  renderAccounts = (record) => {
    return (
      <div>
        <Table
          columns={bankAccountColumn}
          dataSource={record.bankAccounts}
          pagination={false}
          />
      </div>
    )
  };
  render() {
    return (
      <div>
        <Input placeholder="查找用户" onChange={this.onSearchChange}/>
        <ObjectTable
          expandedRowRender={this.renderAccounts}
          columns={columns}
          fetchData={this.fetchData}
          ref="table"
        />
      </div>
    );
  }
}
